<main *ngIf="data != null">
  <p class="package-count">
    <span>{{ data.count }}</span> results
  </p>

  <ul class="package-list">
    <li class="list-item -full" *ngFor="let package of data.packages">
      <h3 class="title">
        <a [routerLink]="getDetailUrl(package)">{{ package.name }}</a>
      </h3>
      <p class="description">{{ package.description }}</p>
      <p class="metadata">
        v <a [routerLink]="getDetailUrl(package)">{{ package.latest }}</a>

        • Updated: <span>{{ package.updatedAt | date: "mediumDate" }}</span>
        <span class="package-tag" *ngFor="let tag of package.tags">{{
          tag
        }}</span>
      </p>
    </li>
  </ul>
  <ul class="pagination">
    <li [ngClass]="{ '-disabled': currentPage == 0 }">
      <a [routerLink]="getListUrl(currentPage - 1)">
        <span>«</span>
      </a>
    </li>
    <li
      [ngClass]="{ '-active': currentPage == page }"
      *ngFor="let page of pages"
    >
      <a [routerLink]="getListUrl(page)">
        <span>{{ page + 1 }}</span>
      </a>
    </li>
    <li [ngClass]="{ '-disabled': currentPage == pageCount - 1 }">
      <a [routerLink]="getListUrl(currentPage + 1)">
        <span>»</span>
      </a>
    </li>
  </ul>
</main>
